<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Realvine - Choose your dream place</title>

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700&display=swap"
    rel="stylesheet">
</head>

<body id="top">

  <!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">

      <a href="#" class="logo">
        <ion-icon name="business-outline"></ion-icon> Realvine
      </a>

      <nav class="navbar container" data-navbar>
        <ul class="navbar-list">

          <li>
            <a href="#" class="navbar-link" data-nav-link>Home</a>
          </li>

          <li>
            <a href="#" class="navbar-link" data-nav-link>Buy</a>
          </li>

          <li>
            <a href="#" class="navbar-link" data-nav-link>Sell</a>
          </li>

          <li>
            <a href="#" class="navbar-link" data-nav-link>Listing</a>
          </li>

          <li>
            <a href="#" class="navbar-link" data-nav-link>About Us</a>
          </li>

          <li>
            <a href="#" class="navbar-link" data-nav-link>Contact</a>
          </li>

        </ul>
      </nav>

      <a href="#" class="btn btn-secondary">Signup</a>

      <button class="nav-toggle-btn" aria-label="Toggle menu" data-nav-toggler>
        <ion-icon name="menu-outline" aria-hidden="true" class="menu-icon"></ion-icon>
        <ion-icon name="close-outline" aria-hidden="true" class="close-icon"></ion-icon>
      </button>

    </div>
  </header>





  <main>
    <article class="article">

      <!-- 
        - #HERO
      -->

      <section class="section hero" aria-label="hero">
        <div class="container">

          <div class="hero-bg">
            <div class="hero-content">

              <h1 class="h1 hero-title">
                We will help you find your <span class="span">Wonderful</span> home
              </h1>

              <p class="hero-text">
                A great plateform to buy, sell and rent your properties without any agent or commisions.
              </p>

            </div>
          </div>

          <div class="hero-form-wrapper">
            <div class="form-tab">

              <button class="tab-btn active" data-tab-btn>Buy</button>
              <button class="tab-btn" data-tab-btn>Sell</button>
              <button class="tab-btn" data-tab-btn>Rent</button>

            </div>

            <form action="" class="hero-form">

              <div class="input-wrapper">

                <label for="search" class="input-label">Search : *</label>

                <input type="search" name="search" id="search" placeholder="Search your home" required
                  class="input-field">

                <ion-icon name="search-outline"></ion-icon>

              </div>

              <div class="input-wrapper">
                <label for="category" class="input-label">Select Categories:</label>

                <select name="category" id="category" class="dropdown-list">

                  <option value="house">House</option>
                  <option value="apartment">Apartment</option>
                  <option value="offices">Offices</option>
                  <option value="townhome">Townhome</option>

                </select>
              </div>

              <div class="input-wrapper">
                <label for="min-price" class="input-label">Min Price :</label>

                <select name="min-price" id="min-price" class="dropdown-list">

                  <option value="min price">Min Price</option>
                  <option value="500">500</option>
                  <option value="1000">1000</option>
                  <option value="2000">2000</option>
                  <option value="3000">3000</option>
                  <option value="4000">4000</option>
                  <option value="5000">5000</option>
                  <option value="6000">6000</option>

                </select>
              </div>

              <div class="input-wrapper">
                <label for="max-price" class="input-label">Max Price :</label>

                <select name="max-price" id="max-price" class="dropdown-list">

                  <option value="max price">Max Price</option>
                  <option value="500">500</option>
                  <option value="1000">1000</option>
                  <option value="2000">2000</option>
                  <option value="3000">3000</option>
                  <option value="4000">4000</option>
                  <option value="5000">5000</option>
                  <option value="6000">6000</option>

                </select>
              </div>

              <button type="submit" class="btn btn-primary">Search now</button>

            </form>
          </div>

        </div>
      </section>





      <!-- 
        - #ABOUT
      -->

      <section class="section about" aria-label="about">
        <div class="container">

          <div class="about-banner img-holder" style="--width: 600; --height: 700;">
            <img src="./assets/images/about-banner.jpg" width="600" height="700" loading="lazy" alt="about banner"
              class="img-cover">

            <button class="play-btn" aria-label="play video">
              <ion-icon name="play" aria-hidden="true"></ion-icon>
            </button>
          </div>

          <div class="about-content">

            <h2 class="h2 section-title">Efficiency. Transparency. Control.</h2>

            <p class="section-text">
              Hously developed a platform for the Real Estate marketplace that allows buyers and sellers to easily
              execute a
              transaction on their own. The platform drives efficiency, cost transparency and control into the hands of
              the consumers.
              Hously is Real Estate Redefined.
            </p>

            <a href="#" class="btn btn-primary">Learn More</a>

          </div>

        </div>
      </section>





      <!-- 
        - #SERVICE
      -->

      <section class="section service" aria-label="service">
        <div class="container">

          <h2 class="h2 section-title">How It Works</h2>

          <p class="section-text">
            A great plateform to buy, sell and rent your properties without any agent or commisions.
          </p>

          <ul class="service-list">

            <li>
              <div class="service-card">

                <div class="card-icon">
                  <ion-icon name="home-outline"></ion-icon>
                </div>

                <h3 class="h3 card-title">Evaluate Property</h3>

                <p class="card-text">
                  If the distribution of letters and 'words' is random, the reader will not be distracted from making.
                </p>

              </div>
            </li>

            <li>
              <div class="service-card">

                <div class="card-icon">
                  <ion-icon name="briefcase-outline"></ion-icon>
                </div>

                <h3 class="h3 card-title">Meeting with Agent</h3>

                <p class="card-text">
                  If the distribution of letters and 'words' is random, the reader will not be distracted from making.
                </p>

              </div>
            </li>

            <li>
              <div class="service-card">

                <div class="card-icon">
                  <ion-icon name="key"></ion-icon>
                </div>

                <h3 class="h3 card-title">Close the Deal</h3>

                <p class="card-text">
                  If the distribution of letters and 'words' is random, the reader will not be distracted from making.
                </p>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #PROPERTY
      -->

      <section class="section property" aria-label="property">
        <div class="container">

          <h2 class="h2 section-title">Featured Properties</h2>

          <p class="section-text">
            A great plateform to buy, sell and rent your properties without any agent or commisions.
          </p>

          <ul class="property-list">

            <li>
              <div class="property-card">

                <figure class="card-banner img-holder" style="--width: 800; --height: 533;">
                  <img src="./assets/images/property-1.jpg" width="800" height="533" loading="lazy"
                    alt="10765 Hillshire Ave, Baton Rouge, LA 70810, USA" class="img-cover">
                </figure>

                <button class="card-action-btn" aria-label="add to favourite">
                  <ion-icon name="heart" aria-hidden="true"></ion-icon>
                </button>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">10765 Hillshire Ave, Baton Rouge, LA 70810, USA</a>
                  </h3>

                  <ul class="card-list">

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="cube-outline"></ion-icon>
                      </div>

                      <span class="item-text">8000sqf</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="bed-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Beds</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="man-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Baths</span>
                    </li>

                  </ul>

                  <div class="card-meta">

                    <div>
                      <span class="meta-title">Price</span>

                      <span class="meta-text">$5000</span>
                    </div>

                    <div>
                      <span class="meta-title">Rating</span>

                      <span class="meta-text">

                        <div class="rating-wrapper">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <span>5.0(30)</span>

                      </span>
                    </div>

                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="property-card">

                <figure class="card-banner img-holder" style="--width: 800; --height: 533;">
                  <img src="./assets/images/property-2.jpg" width="800" height="533" loading="lazy"
                    alt="59345 STONEWALL DR, Plaquemine, LA 70764, USA" class="img-cover">
                </figure>

                <button class="card-action-btn" aria-label="add to favourite">
                  <ion-icon name="heart" aria-hidden="true"></ion-icon>
                </button>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">59345 STONEWALL DR, Plaquemine, LA 70764, USA</a>
                  </h3>

                  <ul class="card-list">

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="cube-outline"></ion-icon>
                      </div>

                      <span class="item-text">8000sqf</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="bed-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Beds</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="man-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Baths</span>
                    </li>

                  </ul>

                  <div class="card-meta">

                    <div>
                      <span class="meta-title">Price</span>

                      <span class="meta-text">$5000</span>
                    </div>

                    <div>
                      <span class="meta-title">Rating</span>

                      <span class="meta-text">

                        <div class="rating-wrapper">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <span>5.0(30)</span>

                      </span>
                    </div>

                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="property-card">

                <figure class="card-banner img-holder" style="--width: 800; --height: 533;">
                  <img src="./assets/images/property-3.jpg" width="800" height="533" loading="lazy"
                    alt="3723 SANDBAR DR, Addis, LA 70710, USA" class="img-cover">
                </figure>

                <button class="card-action-btn" aria-label="add to favourite">
                  <ion-icon name="heart" aria-hidden="true"></ion-icon>
                </button>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">3723 SANDBAR DR, Addis, LA 70710, USA</a>
                  </h3>

                  <ul class="card-list">

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="cube-outline"></ion-icon>
                      </div>

                      <span class="item-text">8000sqf</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="bed-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Beds</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="man-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Baths</span>
                    </li>

                  </ul>

                  <div class="card-meta">

                    <div>
                      <span class="meta-title">Price</span>

                      <span class="meta-text">$5000</span>
                    </div>

                    <div>
                      <span class="meta-title">Rating</span>

                      <span class="meta-text">

                        <div class="rating-wrapper">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <span>5.0(30)</span>

                      </span>
                    </div>

                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="property-card">

                <figure class="card-banner img-holder" style="--width: 800; --height: 533;">
                  <img src="./assets/images/property-4.jpg" width="800" height="533" loading="lazy"
                    alt="LOT 21 ROYAL OAK DR, Prairieville, LA 70769, USA" class="img-cover">
                </figure>

                <button class="card-action-btn" aria-label="add to favourite">
                  <ion-icon name="heart" aria-hidden="true"></ion-icon>
                </button>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">LOT 21 ROYAL OAK DR, Prairieville, LA 70769, USA</a>
                  </h3>

                  <ul class="card-list">

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="cube-outline"></ion-icon>
                      </div>

                      <span class="item-text">8000sqf</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="bed-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Beds</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="man-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Baths</span>
                    </li>

                  </ul>

                  <div class="card-meta">

                    <div>
                      <span class="meta-title">Price</span>

                      <span class="meta-text">$5000</span>
                    </div>

                    <div>
                      <span class="meta-title">Rating</span>

                      <span class="meta-text">

                        <div class="rating-wrapper">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <span>5.0(30)</span>

                      </span>
                    </div>

                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="property-card">

                <figure class="card-banner img-holder" style="--width: 800; --height: 533;">
                  <img src="./assets/images/property-5.jpg" width="800" height="533" loading="lazy"
                    alt="710 BOYD DR, Unit #1102, Baton Rouge, LA 70808, USA" class="img-cover">
                </figure>

                <button class="card-action-btn" aria-label="add to favourite">
                  <ion-icon name="heart" aria-hidden="true"></ion-icon>
                </button>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">710 BOYD DR, Unit #1102, Baton Rouge, LA 70808, USA</a>
                  </h3>

                  <ul class="card-list">

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="cube-outline"></ion-icon>
                      </div>

                      <span class="item-text">8000sqf</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="bed-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Beds</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="man-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Baths</span>
                    </li>

                  </ul>

                  <div class="card-meta">

                    <div>
                      <span class="meta-title">Price</span>

                      <span class="meta-text">$5000</span>
                    </div>

                    <div>
                      <span class="meta-title">Rating</span>

                      <span class="meta-text">

                        <div class="rating-wrapper">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <span>5.0(30)</span>

                      </span>
                    </div>

                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="property-card">

                <figure class="card-banner img-holder" style="--width: 800; --height: 533;">
                  <img src="./assets/images/property-6.jpg" width="800" height="533" loading="lazy"
                    alt="5133 MCLAIN WAY, Baton Rouge, LA 70809, USA" class="img-cover">
                </figure>

                <button class="card-action-btn" aria-label="add to favourite">
                  <ion-icon name="heart" aria-hidden="true"></ion-icon>
                </button>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">5133 MCLAIN WAY, Baton Rouge, LA 70809, USA</a>
                  </h3>

                  <ul class="card-list">

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="cube-outline"></ion-icon>
                      </div>

                      <span class="item-text">8000sqf</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="bed-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Beds</span>
                    </li>

                    <li class="card-item">
                      <div class="item-icon">
                        <ion-icon name="man-outline"></ion-icon>
                      </div>

                      <span class="item-text">4 Baths</span>
                    </li>

                  </ul>

                  <div class="card-meta">

                    <div>
                      <span class="meta-title">Price</span>

                      <span class="meta-text">$5000</span>
                    </div>

                    <div>
                      <span class="meta-title">Rating</span>

                      <span class="meta-text">

                        <div class="rating-wrapper">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <span>5.0(30)</span>

                      </span>
                    </div>

                  </div>

                </div>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #CONTACT
      -->

      <section class="section contact" aria-label="contact">
        <div class="container">

          <h2 class="h2 section-title">Have Question ? Get in touch!</h2>

          <p class="section-text">
            A great plateform to buy, sell and rent your properties without any agent or commisions.
          </p>

          <button class="btn btn-primary">
            <ion-icon name="call-outline"></ion-icon>

            <span class="span">Contact us</span>
          </button>

        </div>
      </section>





      <!-- 
        - #NEWSLETTER
      -->

      <section class="newsletter" aria-label="newsletter">
        <div class="container">

          <div class="wrapper">
            <h2 class="h2 section-title">Subscribe to Newsletter!</h2>

            <p class="section-text">Subscribe to get latest updates and information.</p>
          </div>

          <form action="" class="newsletter-form">
            <input type="email" name="email_address" placeholder="Enter your email :" aria-label="Enter your email"
              required class="email-field">

            <button type="submit" class="btn btn-secondary">Subscribe</button>
          </form>

        </div>
      </section>

    </article>
  </main>





  <!-- 
    - #FOOTER
  -->

  <footer class="footer">

    <div class="footer-top">
      <div class="container">

        <div class="footer-brand">

          <a href="#" class="logo">
            <ion-icon name="business-outline"></ion-icon> Realvine
          </a>

          <p class="footer-text">
            A great plateform to buy, sell and rent your properties without any agent or commisions.
          </p>

        </div>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">Company</p>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">About us</span>
            </a>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Services</span>
            </a>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Pricing</span>
            </a>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Blog</span>
            </a>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Login</span>
            </a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">Useful Links</p>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Terms of Services</span>
            </a>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Privacy Policy</span>
            </a>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Listing</span>
            </a>
          </li>

          <li>
            <a href="#" class="footer-link">
              <ion-icon name="chevron-forward"></ion-icon>

              <span class="span">Contact</span>
            </a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">Contact Details</p>
          </li>

          <li class="footer-item">
            <ion-icon name="location-outline"></ion-icon>

            <address class="address">
              C/54 Northwest Freeway,<br>
              Suite 558,<br>
              Houston, USA 485
              <a href="#" class="address-link">View on Google map</a>
            </address>
          </li>

          <li class="footer-item">
            <ion-icon name="mail-outline"></ion-icon>

            <a href="mailto:contact@example.com" class="footer-link">contact@example.com</a>
          </li>

          <li class="footer-item">
            <ion-icon name="call-outline"></ion-icon>

            <a href="tel:+152534468854" class="footer-link">+152 534-468-854</a>
          </li>

        </ul>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          &copy; 2022 Realvine. All Right Reserved by <a href="#" class="copyright-link">codewithsadee</a>.
        </p>

        <ul class="social-list">

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-facebook"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-twitter"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-linkedin"></ion-icon>
            </a>
          </li>

        </ul>

      </div>
    </div>

  </footer>





  <!-- 
    - #BACK TO TOP
  -->

  <a href="#top" class="back-top-btn" aria-label="back to top" data-back-top-btn>
    <ion-icon name="arrow-up" aria-hidden="true"></ion-icon>
  </a>





  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>